<template>
  <el-card class="app-container" shadow="always">
    <div slot="header">
      <span>添加房间类型</span>
    </div>
    <el-form ref="form1" :model="form1" label-width="120px">
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'}
        ]"
        prop="roomType"
        label="房间类型名称">
        <el-input v-model="form1.roomType" placeholder="请输入房间类型名"/>
      </el-form-item>
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
          { type: 'number', message: '必须为数字值'}
        ]"
        label="预定价格"
        prop="price"
      >
        <el-input v-model.number="form1.price" type="number" placeholder="单位：元"/>
      </el-form-item>
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
          { type: 'number', message: '必须为数字值'}
        ]"
        label="预定折扣"
        prop="discount"
      >
        <el-input v-model.number="form1.discount" type="number" placeholder="0-100%"/>
      </el-form-item>
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
          { type: 'number', message: '必须为数字值'}
        ]"
        label="房间面积"
        prop="area"
      >
        <el-input v-model.number="form1.area" type="number" placeholder="单位：m²"/>
      </el-form-item>

      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
        ]"
        label="样式图片">
        <el-upload
          v-model="form1.cover"
          class="upload-demo"
          action="http://localhost:8082/files/upload"
          :auto-upload=true
          :on-success="uploadFileSuccess"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>

      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
        ]"
        label="是否有窗">
        <el-radio v-model="form1.window" :label="windowSwitch.has">有窗</el-radio>
        <el-radio v-model="form1.window" :label="windowSwitch.none">没有窗</el-radio>
      </el-form-item>
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
          { type: 'number', message: '必须为数字值'}
        ]"
        label="床位数量"
        prop="bedNum"
      >
        <el-input-number v-model="form1.bedNum" :min="1" :max="10" label="床位数量"/>
      </el-form-item>
      <el-form-item
        :rules="[
          { required: true, message: '不能为空'},
        ]"
        label="床大小"
        prop="bedSize"
      >
        <el-input v-model.number="form1.bedSize" placeholder="例如：1.2m*1.5m"/>
      </el-form-item>
      <el-form-item label="详细描述">
        <el-input v-model="form1.remark" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit()">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import { addRoomType } from '@/api/roomType'
  import ElCard from 'element-ui/packages/card/src/main'

  export default {
    components: { ElCard },
    data() {
      return {
        form1: {
          typeId: null,
          roomType: null,
          area: null,
          window: null,
          bedNum: null,
          bedSize: null,
          price: null,
          discount: null,
          remark: null,
          url: 'https://img1.baidu.com/it/u=336900772,3853280533&fm=26&fmt=auto',
        },
        loading: false,
        windowSwitch: {
          has: 1,
          none: 0
        }
      }
    },
    methods: {
      uploadFileSuccess(res) {
        console.log(res)
        this.form1.cover = res.data
      },
      onSubmit() {
        this.$refs.form1.validate((valid) => {
          if (valid) {
            this.loading = true
            addRoomType(this.form1).then(response => {
              const res = response
              if (res.code === 1000) {
                this.$message({
                  message: '提交成功！',
                  type: 'success'
                })
                this.loading = false
                setTimeout(this.onCancel(), 20000)
              } else {
                this.showError()
                this.loading = false
              }
            })
          } else {
            this.loading = false
            return false
          }
        })
      },
      showError() {
        this.$message({
          message: '提交失败！',
          type: 'error'
        })
      },
      onCancel() {
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>
